<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="orderlist" v-else>
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar :autoBack="true" title="我的派单" bgColor="#fff" :fixed="true" @leftClick="goHome" >
			<view slot="right">
				<text style="padding: 5px 16px;border-radius: 12px;background: #45C4B0;font-size: 10px;color: #fff;" @click="is_dong ? showTips() : $go('/task/resease/resease')">发布</text>
			</view>
		</u-navbar>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="top_nav"  @click="is_dong ? showTips() : $go('/task/resease/resease')">
			<image :src="'/images/task_top.png' | formatImgUrl"  mode=""></image>
			<span>发布需求</span>
		</view>
		<!-- #endif -->
		
		
		<view class="empytView" v-if="list.length<=0 && loadEnd">
			<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
			<!-- <view>- 空列表 -</view> -->
		</view>
		
		<view class="cont" v-for="(item,index) in list" @click="$go('/task/list/order_dea?id='+item.id)" v-if="loadEnd">
			<view class="cont_s">
				<view class="con_top">
					<view>剩余时间：
						<wly-countdown  :hour="getDateStr(item.sy_time,1)" :minute="getDateStr(item.sy_time,2)" :second="getDateStr(item.sy_time,3)" showType="slot">
							<template v-slot="{day, hour, minute, second}">
								<view v-if="day||hour||minute||second">
						
									<view class="time_model">
										<view>
											{{hour}}
										</view>
										<view>
											:
										</view>
									</view>
									<view class="time_model">
										<view>
											{{minute}}
										</view>
										<view>
											:
										</view>
									</view>
									<view class="time_model">
										<view>
											{{second}}
										</view>
									</view>
								</view>
							</template>
						</wly-countdown>
					
					</view>
					<view>{{item.apply_num}}位写手申请</view>
				</view>
				
				<view class="con_nav">
					<view class="navs">
						<view class="icon">订</view>
						<view class="navs_right">
							<view class="tp">
								字数共计{{item.tran_font_num}}{{item.tran_font_word}}，
								<text v-if="item.task_type==0">
									订单价格每{{item.tran_font_word}}{{item.tarn_price}}币
								</text>
								<text>
									订单价格共计{{parseInt(item.money)}}币
								</text>
								
								
							</view>
							
							<view class="bom">截稿时间:{{item.end_time.substring(0,17)}}，类型：{{item.c_desc}}</view>
						</view>
					</view>
					<view class="navs">
						<view class="icon xie">写</view>
						<view class="navs_right">
							<view class="tp">写手等级为:【{{array_level_arr(item.level)}}】</view>
							<view class="bom">写手性别要求:{{item.sex==0?"不限":(item.sex==1?"男":"女")}}
								{{item.is_bao==0?"":'用户要求作品保密'}}
							</view>
						</view>
					</view>
					<view class="con_bomt">
						<span>制作要求：</span>{{item.c_content}}
					</view>
				</view>
				
				<view class="bomt">
					<view class="bomt_a_left">此订单全额稿费预计</view>
					<view class="bomt_a_right">
						{{item.money}}
						</view>
				</view>
				<view class="bomt_one">
					<view @tap.stop="items=item,current=1,showConfirm=true">取消订单</view>
					<view @tap.stop="items=item,current=0,showConfirm=true">重置时间</view>
				</view>
			</view>
		</view>
		
		<view class="zhanwei"></view>
		<view class="tarb_new">
			<view class="tar_home">
				<image :src="tar_index==0?'../static/image/tar_home1.png':'../static/image/tar_home.png'" mode="aspectFit"></image>
				<view>
					首页
				</view>
			</view>
			<view class="tar_order" @click="$go('/task/list/user_my_orderlist')">
				<image :src="tar_index==0?'../static/image/tar_order.png':'../static/image/tar_order1.png'" mode="aspectFit"></image>	
				<view>
					订单
				</view>
			</view>
		</view>
		
		<u-popup mode="center" :show="showConfirm">
			<view class="mask">
				<view class="matitle">
					<text>提示</text>
				</view>
				<view class="matxt">
					<block v-if="current== 1">{{'是否取消订单【' + items.c_title + '】'}} </block>
					<block v-else >{{'是否重置时间【' + items.c_title + '】'}}</block>
				</view>
				<view class="quque">
					<view class="quli" @click="showConfirm = false">
						取消
					</view>
					<view class="quli quactive" @click="sumit_qx(items,current)">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- <dLoading :status="loading"></dLoading> -->
	</view>
</template>

<script>
	
	export default { 
		data() {
			return {
				tar_index:0,
				list: [],
				page: 1,
				array_level: ['不限', '1-10', '11-20','21-30','21-30','31-40','41-50'],
				loading: '',
				loadEnd: false,
				is_dong: '',
				totalPage: true,
				showConfirm: false,
				current: '',
				items: {}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1;
			this.list = [];
			this.get_list()
			this.getAccountState()
		},
		created() {
		   let that = this;
		},
		onReachBottom() {
			 this.get_list();
		},
		onPullDownRefresh() {
			setTimeout(function() {
					uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
				this.page = 1;
				this.list = [];
				this.get_list()
		},
		methods: {
			goHome(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 当前账号的冻结信息
			getAccountState(){
				this.$api.default.request('index/getStatus', {
					type: 3,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_dong = res.is_dong
					}
				})
			},
			showTips(){
				this.$common.errorToShow('您的派单发布权限已被暂时关停')
			},
			sumit_qx(item,type){
				let str = "重置时间";
				if(type == 1){
					 str = "取消订单";
				}
				let _this = this;
				_this.$api.default.request('task/task_edit', {
					id: item.id,
					type:_this.current
				}).then((res) => {
				console.log(222,"的充值")
						_this.showConfirm = false
						
						_this.page = 1;
						_this.list = [];
						_this.get_list()
					
				})
			},
			getDateStr(mss,type){
					    var days = parseInt(mss / 86400);
						var hours = parseInt((mss-(days*86400))/3600);
						var minutes = parseInt((mss-(days*86400)-(hours*3600))/60);
						var seconds = mss-(days*86400)-(hours*3600) - (minutes * 60)
						
						 if(type == 0){
						 	 return days;
						 }
						 if(type == 1){
							  return hours;
						 }
						 if(type == 2){
						 	  return minutes;
						 }
						 if(type == 3){
							  return seconds;
						 }
					
			},	
			array_level_arr(index){
			
					var array_level = ['不限', '1-10', '11-20','21-30','21-30','31-40','41-50'];
					return array_level[index];
			},
			get_list(){
				var _this = this;
				_this.loading = true
				this.$api.default.request('task/orderList', {
					page: this.page,
					type: 0
				}, 'POST', false).then((res) => {
					if (res.code) {
					
						 if(res.data.data){
							if (_this.list != null) {
								// this.articleList.concat(res.data.data);
								_this.list = _this.list.concat(res.data.data);
								// res.data.data.forEach((item) => {
								// 	this.logList.push(item)
								// })
							} else {
								_this.list =	res.data.data;
							}
							_this.page++; // 页数加一，加载下一页数据
						}
						
						_this.loadEnd = true
					}
					
					_this.totalPage = false
				})
			},
			goToxie() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.$config.default.Url + '/agreement/1000009'
				})
			},
			hidePay(e){
				console.log(e)
			},
			goPay(){
				this.$api.default.request('order/createvip', prams).then((res) => {
					if (res.code) {
						this.$common.wxPay(res.data, () => {
						
							that.$common.errorToShow('支付成功');
							setTimeout(function(){
								uni.navigateTo({
									url: '/pages/user/orderdetail?id=' + this.orderInfo.id
								})
							}, 800); 
						})
					}
				})
				
			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意用户协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
		}
	}
</script>

<style lang="scss">
	
	page{
		background: #f2f5f2;
	}
	.orderlist {
		/* #ifndef MP-WEIXIN */
		padding-top: calc(var(--status-bar-height) +  44px);
		/* #endif */
		
		.empytView{
			padding-top: 200rpx;
		}
		.zhanwei{
			width: 100%;
			height: 100px;
			float: left;
		}
		width: 92%;
		margin-left: 4%;
		.top_nav{
			margin-top: 10px;
			width: 100%;
			height: 37px;
			line-height: 37px;
			text-align: center;
			border-radius: 0.5em;
			background: #fff;
		
			image{
				width: 15px;
				height: 15px;
				position: relative;
				top: 3px;
			}
			span{
				margin-left:6px;
				font-size: 12px;
				color: #999;
			}
		}
		.cont{
			width: 100%;
			border-radius: 0.5em;
			background: #fff;
			margin-top: 13px;
			color: #3d3d3d;
			font-weight: 640;
			float: left;
			.cont_s{
				width: 90%;
				margin-left: 5%;
				.con_top{
					padding-top: 12px;
					width: 100%;
					font-size: 14px;
					float: left;
					padding-bottom: 12px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
					view{
						float: left;
						&:last-child{
							float: right;
							color: #45C4B0;
							font-size: 13px;
							font-weight: 500;
						}
					}
				}
			}
			.con_nav{
				margin-top: 10px;
				width: 100%;
				float: left;
				.navs{
					.icon{
						width: 14px;
						height: 14px;
						border-radius: 6px;
						padding: 2px 3px;
						background: #45C4B0;
						float: left;
						font-size: 9px;
						line-height: 14px;
						color: #fff;
						text-align: center;
						position: relative;
						top:2px;
						margin-right: 5px;
					}
					.xie{
						background: #7AAAF2 !important;
					}
					.navs_right{
						.tp{
							font-size: 15px;
							width: 90%;
							overflow: hidden;   //隐藏
							white-space: nowrap;  //不换行
							text-overflow: ellipsis; //超出部分省略号
						}
						.bom{
							margin-left: 25px;
							width: 100%;
							color: #999;
							font-size: 12px;
							font-weight: 400;
							margin-top: 5px;
							margin-bottom: 10px;
						}
					}
				}
				.con_bomt{
					font-weight: 400;
					width: 86%;
					padding-left: 7%;
					padding-right: 7%;
					padding-bottom: 15rpx;
					background: rgba(216, 216, 216, 0.3);
					color: #999;
					font-size:10px;
					border-radius: 0.5em;
					padding-top: 5px;
					span{
						color: #45C4B0;
					}
					overflow-wrap:break-word
				}
			}
			.bomt{
				 margin-top: 12px;
				 padding-bottom: 8px;
				 border-bottom:  1px solid rgba(153, 153, 153, 0.1);;
				 float: left;
				 width: 100%;
				 font-size: 15px;
				.bomt_a_left{
					float: left;
				}
				
				
				.bomt_a_right{
					float: right;
					color: #45C4B0;
					overflow: hidden;   //隐藏
					text-overflow: ellipsis; //超出部分省略号
					 font-size: 16px;
					span{
						font-size: 12px;
						overflow: hidden;   //隐藏
						text-overflow: ellipsis; //超出部分省略号
					};
				}
			}
			.bomt_one{
				width: 100%;
				float: left;
				margin-top: 20rpx;
				height: 100rpx;
				view{
					width: 290rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 0.2em;
					font-size: 26rpx;
					text-align: center;
					&:first-child{
						float: left;
						// margin-left: 10px;
						background: rgba(216, 216, 216, 0.3);
						color: #999;
					}
					
					&:last-child{
						float: right;
						// margin-right: 10px;
						background: #45C4B0;
						color: #fff;
					}
				}
			}
			
		}
		.tarb_new{
			position: fixed;
			bottom: 0px;
			background: #fff;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			left: 0px;
			height: 50px;
			width: 100%;
			padding-top: 10px;
			view{
				
				width: 50%;
				margin: 0 auto;
				float: left;
				text-align: center;
				
				image{
					
					margin: 0 auto;
					height: 20px;
					width: 28px;
				}
				view{
					font-size: 12px;
					width: 100%;
					text-align: center;
					float: left;
					color: #999999;
				}
				
			};
		}
	}
	
	.mask {
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding-top: 48rpx;
	
		.matitle {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding-bottom: 6rpx;
			line-height: 46rpx;
		}
	
		.matxt {
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;
			letter-spacing: 0em;
			color: #999999;
			line-height: 34rpx;
			padding-bottom: 50rpx;
		}
	
		.quque {
			display: flex;
			align-items: center;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
	
			.quli {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
	
			.quactive {
				background: rgba(69, 196, 176, 0.05);
			}
		}
	}
</style>